<template>
    <el-card shadow="never">
        <el-row>
            <h3 class="main-h3">--- 评论 ---</h3>   <span class="statement">评论将会获取您的Ip地址作为记录保存，不做其他用途，特此声明</span>
        </el-row>
        <el-row class="comm-row">
            <el-form :model="commentForm" :rules="rules" ref="commentForm">
                <el-row class="form-head">
                    <el-form-item label="名称" prop="comment.userName" label-width="50px">
                        <el-input type="text" name="userName" auto-complete="on" v-model="commentForm.comment.userName" placeholder="自拟江湖名称"></el-input>
                    </el-form-item>
                    
                    <el-form-item label="邮箱" prop="email" label-width="50px">
                        <el-input type="text" name="email" auto-complete="on" v-model="commentForm.email" placeholder="Email"></el-input>
                    </el-form-item>
                </el-row>
                <el-row class="form-editor">
                    <el-form-item prop="comment.content">
                        <el-input
                            type="textarea"
                            :rows="2"
                            placeholder="请输入内容"
                            v-model="commentForm.comment.content">
                        </el-input>
                    </el-form-item>
                </el-row>
                <el-row>
                    <el-button type="primary" @click="submitForm('commentForm')">发表</el-button>
                </el-row>
            </el-form>
        </el-row>
        <el-row class="comm-foot">
            <el-row>
                <span>共有 {{dataList.length}} 条评论</span>
            </el-row>
            <el-row>
                <el-card class="comm-main" v-for="(item,index) in dataList" :key="index">
                    <div class="head-name">
                        <el-avatar>{{item.userName}}</el-avatar>
                        <h4>{{item.userName}}：</h4>
                        <p class="head-date">
                            <el-row>{{item.date}}</el-row>
                            <el-row><span class="reply" @click="MainReplyClick(item.commId,index,item)">评论</span></el-row>
                        </p>
                    </div>
                    <div class="comm-content">{{item.content}}</div>
                    <div class="reply-textarea" v-show="activeIndex===index">
                        <!-- 回复评论表单提交 -->
                        <el-form :model="replyForm" :rules="rules" ref="replyForm">
                            <el-form-item prop="comment.content">
                                <el-input
                                    type="textarea"
                                    :rows="2"
                                    placeholder="请输入内容"
                                    v-model="replyForm.comment.content">
                                </el-input>
                            </el-form-item>
                            <el-row class="email-ip">
                                <el-form-item label="邮箱" prop="email" label-width="50px">
                                    <el-input type="text" name="email" auto-complete="on" v-model="replyForm.email" placeholder="Email"></el-input>
                                </el-form-item>
                                <el-form-item label="IP" prop="IP" label-width="50px">
                                    <el-input
                                        placeholder="请输入内容"
                                        v-model="replyForm.ip"
                                        :disabled="true">
                                    </el-input>
                                </el-form-item>
                            </el-row>
                            <!-- 回复按钮事件 -->
                            <el-button type="primary" size="mini" @click="submitFormx(0,'replyForm')">回复</el-button>
                        </el-form>
                    </div>

                    <!-- 子评论 -->
                    <el-row class="comm-main-vice">
                        <div>
                            <el-row class="vice-main" v-for="(viceitem,viceindex) in item.commentDTOList" :key="viceindex">
                                <div class="head-name">
                                    <el-avatar>{{viceitem.userName}}</el-avatar>
                                    <h4>{{viceitem.userName}} <span class="small-upname">回复 {{viceitem.userUpName}}：</span></h4>
                                    
                                    <p class="head-date">
                                        <el-row>{{viceitem.date}}</el-row>
                                        <el-row><span class="reply" @click="ViceReplyClick(item.commId, (index + '' + viceindex),viceitem)">评论</span></el-row>
                                    </p>
                                </div>
                                <div class="comm-content"><p>{{viceitem.content}} </p>
                                    <!-- <p class="main-content">{{viceitem.content}}</p> -->
                                </div>
                               
                               <!-- 子回复输入框 -->
                                <div class="reply-textarea" v-show="viceactiveIndex===(index + '' + viceindex)">
                                    <!-- 回复表单提交 -->
                                    <el-form :model="replyForm" :rules="rules" ref="replyForm">
                                        <el-form-item prop="comment.content">
                                            <el-input
                                                type="textarea"
                                                :rows="2"
                                                placeholder="请输入内容"
                                                v-model="replyForm.comment.content"> 
                                            </el-input>
                                        </el-form-item>
                                        <el-row class="email-ip">
                                            <el-form-item label="邮箱" prop="email" label-width="50px">
                                                <el-input type="text" name="email" auto-complete="on" v-model="replyForm.email" placeholder="Email"></el-input>
                                            </el-form-item>
                                            <el-form-item label="IP" prop="IP" label-width="50px">
                                                <el-input
                                                    placeholder="IP"
                                                    v-model="replyForm.ip"
                                                    :disabled="true">
                                                </el-input>
                                            </el-form-item>
                                        </el-row>
                                        <!-- 回复按钮事件 -->
                                        <el-button type="primary" size="mini" @click="submitFormx(1,'replyForm')">回复</el-button>
                                    </el-form>
                                </div>
                            </el-row>
                        </div>
                    </el-row>
                </el-card>
            </el-row>
        </el-row>
    </el-card>
</template>

<script>

import Editor from './public/Editor'
import { getComment, addComment } from '.././api/comment'

export default {
    name: 'Comments',
    components: {
        Editor,
    },
    props: {        // 父传子 值
        params: {
            type: Object,
            required: true
        },
        query: {
            type: Object,
            default() {
                return {}
            }
        }
    },
    watch: {    // 默认初始化
        'query': {
            handler() {
                this.dataList = []
            },
            deep: true
        }
    },
    data() {        // 定义数据
        return {
            sonindex: -1,
            viceactiveIndex: -1,
            activeIndex: -1,
            isMainReply: false,
            isViceReply: false,
            articleId: this.params.articleId,
            replyForm: {
                ip: '',
                email: '',
                comment: {
                    userUpName: '',
                    userName: '',
                    commUpId: '',
                    content: '',
                    articleId: this.params.articleId
                }
            },
            commentForm: {
                ip: '',
                email: '',
                comment: {
                    commUpId: '',
                    userName: '',
                    userUpName: '',
                    content: '',
                    articleId: this.params.articleId
                }
            },
            dataList: [
                {
                    commId: '',
                    userName: '',
                    content: '',
                    date: '',
                    commentDTOList: []
                }
            ],
            rules: {
                comment: {
                    userName: [
                        {
                        required: true, message: '自拟江湖昵称', trigger: 'blur'
                        },
                        { min: 2, max: 5, message: '长度在 2 到 5 个字符', trigger: 'blur' }
                    ],
                    content: [
                        {
                            required: true, message: '请输入内容', trigger: 'blur'
                        }
                    ]
                },
                email: [
                    {
                        require: true, message: '请输入邮箱', trigger: 'blur'
                    },
                    { type: 'email', required: true, message: '请输入有效邮箱地址', trigger: 'blur' }
                ]
            }
        }
    },
    created(){  // 生命周期结束
        this.getCommtent()
        this.getIp()
    },
    methods: {  // 创建构造函数
        load() {    // 默认执行
            this.getCommtent()
        },
        getIp(){    // 获取IP地址
            let ip = returnCitySN["cip"]
            let cname = returnCitySN["cname"]
            this.replyForm.ip = ip
            this.commentForm.ip = ip
        },
        MainReplyClick(id,index,item){  // 点击主评论
            // this.isMainReply = replyBool
            this.viceactiveIndex = -1
            this.activeIndex = index
            this.replyForm.comment.commUpId = item.commId
            this.replyForm.comment.userUpName = item.userName
        },
        ViceReplyClick(id,index,viceitem){  // 点击子评论显示输入
            this.activeIndex = -1
            this.viceactiveIndex = -1
            this.viceactiveIndex = index
            this.replyForm.comment.commUpId = viceitem.commId
            this.replyForm.comment.userUpName = viceitem.userName
        },
        getCommtent(){  // 获取当前文章评论
            let that = this
            that.query.articleId = that.params.articleId;
            getComment(that.query).then(res => {
                let newCommtent;
                newCommtent = res.data
                // this.dataList.length = newCommtent
                this.dataList = newCommtent
            })
        },
        submitForm:function(formName){  // 发表评论事件
            let that = this
            this.$refs[formName].validate((valid) => {
                if(valid){
                    addComment(that.commentForm).then( res => {
                        if(res.code == 200){
                            console.log(res.message)
                            // this.dataList.push(that.commentForm.comment)
                        }else{
                            console.log(res.message)
                        }
                        that.resetForm(formName)
                    })
                }
            })
        },
        submitFormx:function(i,formName){  // 发表评论事件
            let that = this
            this.$refs[formName][i].validate((valid) => {
                if(valid){
                    addComment(that.replyForm).then( res => {
                        if(res.code == 200){
                            console.log('评论添加成功')
                            // this.dataList.push(that.replyForm.comment)
                        }else{
                            console.log('评论添加失败，原因未知')
                        }
                        that.resetFormx(i,formName)
                    })
                }
            })
        },
        resetForm(formName) {
            this.$refs[formName].resetFields();
        },
        resetFormx(i,formName) {
            this.$refs[formName][i].resetFields();
        },
    }
}
</script>

<style scoped>
.main-h3 {
    width: 20%;
    /* float: left; */
}
.statement {
    font-size: 14px;
    /* display: flex; */
    color: rgb(255, 0, 0);

}
.comm-row {
    margin: 20px 0 0 0;
}
.form-head {
    display: flex;
}
.form-head .el-form-item{
    margin-right: 50px;
}
.comm-foot {
    margin: 20px 0 0 0;
}
.comm-main {
    margin-top: 20px;
    /* padding: 10px; */
    width: 100%;
    /* background-color: rgb(247, 247, 247); */
    padding-bottom: 20px;
}
.form-editor {
    margin-bottom: 20px;
}
.el-avatar {
    width: 50px;
    display: block;
}
.head-name {
    display: flex;
    height: 40px;
    line-height: 40px;
    padding: 10px;
}
.head-name h4 {
    line-height: 60px;
    width: 200px;
}
.small-upname {
    font-size: 12px;
     color: #d3d3d3;
}
.head-name .el-avatar{
    margin-right: 10px;    
}
.main-content {
    font-size: 12px;
    color: rgb(231, 231, 231);
}
.reply-textarea {
    margin: 0 0 0 50px;
}
.reply-textarea .el-button {
    margin: 10px 0 0 0;
}
.head-date {
    width: 100%;
    line-height: 20px;
    font-size: 14px;
    color: #d3d3d3;
    text-align: right;
}
.head-date .reply{
    width: 100%;
    /* line-height: 60px; */
    font-size: 12px;
    color: #d3d3d3;
    display: block;
    cursor: pointer;
}
.head-date .el-row{
    text-align: right;
}
.comm-content {
    /* width: 100%; */
    height: auto;
    margin-left: 50px;
    margin-bottom: 10px;
}
.vice-main {
    margin-left: 30px;
}
.email-ip {
    display: flex;
    margin: 20px 0 0 0;
}
</style>